<template>
  <div class="newPrimaryClass">
    <div class="newPrimaryClass_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">新增二级分类<i class="el-icon-close"></i></div>
    </div>
    <!-- 商家类型与返回 -->
    <div class="newPrimaryClass_type">
      <div>分类列表/<span>新增二级分类</span></div>
      <el-button type="success">返回</el-button>
    </div>

    <!-- 新增分类信息 -->
    <div class="classInfo">
      <div class="stepClass">
        上级分类：<span>{{ stepName }}</span>
      </div>
      <div class="className">
        <span>分类名称</span>
        <input
          type="text"
          maxlength="7"
          v-model="form.cate_name"
          placeholder="请输入"
        />
      </div>
      <div class="classImg">
        <span>图标</span>
        <div class="toFile" v-if="cate_logo == ''">
          <input
            @change="toUpCateLogo"
            type="file"
            accept="image/png, image/jpeg, image/gif, image/jpg"
          />
          <div><i class="el-icon-plus"></i>上传照片</div>
        </div>
        <div class="cateImg" v-else>
          <img :src="cate_logo" alt="" />
          <div class="cateImgShadow">
            <i @click="delCateImg" class="el-icon-delete"></i>
          </div>
        </div>
      </div>
      <div class="classSort">
        <span>排序</span>
        <input type="number" v-model="form.sort" placeholder="请输入" />
      </div>
      <div class="classSort">
        <span>卖场</span>
        <el-select
          v-model="form.market_id"
          clearable
          disabled
          @change="selectMarket"
          filterable
          placeholder="请选择卖场"
        >
          <el-option
            v-for="item in marketList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="classShow">
        <span>热门</span>
        <el-radio v-model="form.is_hot" :label="1">是</el-radio>
        <el-radio v-model="form.is_hot" :label="0">否</el-radio>
      </div>
    </div>
    <div class="addBtn">
      <el-button @click="addScdCate" type="primary">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: 1,
      stepName: "", //上一级类名
      cate_logo: "",
      form: {
        cate_id: null,
        pid: null,
        cate_name: "",
        cate_logo: "",
        sort: null,
        is_hot: 1,
        market_id: "",
      },
      marketList: [],
    };
  },
  mounted() {
    this.stepName = this.$route.query.stepName;
    this.form.pid = this.$route.query.pid;
    let market_id = this.$route.query.market_id;
    if (market_id) {
      this.form.market_id = market_id;
    }
    let cate_id = this.$route.query.id;
    this.form.cate_id = cate_id;
    console.log(this.form.pid, this.stepName, this.form.cate_id);
    console.log(this.form.cate_id);
    if (this.form.cate_id) {
      this.getCateInfo();
    }
    this.remoteMethod();
  },
  methods: {
    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {},

    // 获取分类详情
    getCateInfo() {
      this.$http
        .post("/api/root/cate/cateDetail", { cate_id: this.form.cate_id })
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.form = res.data;
            this.form.cate_id = res.data.id;
            this.cate_logo = res.data.cate_logo;
            this.form.cate_logo = res.data.cate_logo_id;
            console.log(res);
          }
        });
    },

    // 删除分类图片
    delCateImg() {
      (this.cate_logo = ""), (this.form.cate_logo = "");
    },

    //上传分类logo
    toUpCateLogo(event) {
      let file = event.target.files[0];
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      let form = new FormData();
      console.log(form);
      form.append("file", file);
      this.$http
        .post("/api/client/base/uploadfile", form)
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: "上传成功",
              type: "success",
            });
          }
          let src = res.data.id;
          console.log(src);
          this.form.cate_logo = src;
          this.cate_logo = res.data.url;
        })
        .catch((err) => {
          this.$message({
            showClose: true,
            message: "上传失败",
            type: "error",
          });
        });
    },

    // 新增二级分类
    addScdCate() {
      this.$http.post("/api/root/cate/cateUpdate", this.form).then((res) => {
        if (res.code == 1) {
          this.$router.push({ name: "classList", params: {} });
          this.$message({
            type: "success",
            message: !this.form.cate_id ? "添加成功" : "修改成功",
          });
        } else {
          this.$message({
            type: "warning",
            message: res.msg,
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "newSecondaryClass.less";
</style>

